<!--
* @fileName center-home.vue
* @author caoke
* @date 2022/10/18 14:57:34
* @version V1.0.0
* @description 
!-->
<template>
  <div class="container">
    <div class="header">
      <div class="card-container">
        <div class="top">
          <el-avatar :size="60" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
          <div class="info">
            <span class="title">李真</span>
            <span class="subtitle">18888888888</span>
          </div>
        </div>
        <div class="main">
          <div class="action">
            <div class="title"><i class="el-icon-postcard"></i> 个人资料</div>
            <el-progress :text-inside="true" :stroke-width="22" :percentage="100" status="warning"></el-progress>
            <span class="subtitle">完整度100%</span>
          </div>
          <div class="action">
            <div class="title"><i class="el-icon-postcard"></i> 个人资料</div>
            <el-progress :text-inside="true" :stroke-width="22" :percentage="46"></el-progress>
            <span class="subtitle">完整度100%</span>
          </div>
        </div>
      </div>
      <div class="icon-container">
        <content-card title="服务导航" type="line">
          <div class="main">
            <template v-for="i in list">
              <div class="box" :key="i.name" v-if="i.name =='服务经理' ">
                <i class="el-icon-document img"></i>
                <span class="name">{{i.name}}</span>
                <div class="body">
                  我是过来的内容
                </div>
              </div>
              <div class="box" :key="i.name" v-else>
                <i class="el-icon-document img"></i>
                <span class="name">{{i.name}}</span>
              </div>
            </template>

          </div>

        </content-card>
      </div>
    </div>
    <div class="main">
      <el-menu :default-active="activeIndex" mode="horizontal" background-color="#ffffff" text-color="black" active-text-color="#F76F40">
        <el-menu-item index="1">待支付订单</el-menu-item>
        <el-menu-item index="2">待生效保单</el-menu-item>
        <el-menu-item index="3">已生效保单</el-menu-item>
        <el-menu-item index="4">已过期保单</el-menu-item>
      </el-menu>
      <div style="background-color: #FAFAFA">
        <el-table :data="tableData" stripe>
          <el-table-column type="selection" align="center" width="60px"></el-table-column>
          <!-- type="index" 自动编号 序号 -->
          <!-- <el-table-column type="index" label="序号" align="center" width="60px"></el-table-column> -->
          <el-table-column type="index" label="序号" align="center" width="60px">
            <template slot-scope="scope">
              {{scope.row.index+1}}
            </template>
          </el-table-column>
          <el-table-column label="产品名称" prop="age" align="center"></el-table-column>
          <el-table-column label="金额/元" prop="age" align="center"></el-table-column>
          <el-table-column label="下单时间" prop="age" align="center"></el-table-column>
          <el-table-column label="订单状态" prop="age" align="center"></el-table-column>
          <el-table-column label="操作" prop="age" align="center"></el-table-column>

        </el-table>
        <div class="block" align="right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contentCard from "../../../components/base/content-card/content-card.vue";
export default {
  components: { contentCard },
  name: "",
  data() {
    return {
      activeIndex: "1",
      list: [
        {
          icon: "1",
          name: "服务经理",
        },
        {
          icon: "el-icon-document",
          name: "保单查询",
        },
        {
          icon: "1",
          name: "理赔查询",
        },
        {
          icon: "1",
          name: "关联企业",
        },

        {
          icon: "1",
          name: "资料下载",
        },
      ],
      tableData: [],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.container {
  .header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px;
    .card-container {
      flex: 45;
      border-radius: 18px;
      margin-right: 20px;
      box-shadow: 0px 2px 6px 0px rgba(190, 204, 216, 0.4);
      border-bottom: 1px solid rgba(190, 204, 216, 0.4);
      .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 80px;
        padding: 10px 20px;
        border-radius: 18px 18px 0 0;
        background-color: #f8e8e2;
        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          height: 100%;
          margin-left: 10px;
          .title {
            font-size: 20px;
          }
          .subtitle {
            color: $theme;
          }
        }
      }

      .main {
        display: flex;
        height: 130px;
        width: 100%;
        .action {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          height: 100%;
          width: 100%;
          flex: 1;
          padding: 0px 20px;
          .title {
            font-size: 20px;
          }
          .subtitle {
            color: rgba(190, 204, 216, 1);
          }
        }
      }
    }
    .icon-container {
      flex: 55;
      .main {
        display: flex;
        width: 100%;
        .box {
          position: relative;
          display: flex;
          flex-direction: column;
          flex: 1;
          height: 170px;
          justify-content: space-evenly;
          align-items: center;
          border-radius: 16px;
          box-shadow: 0px 2px 6px 0px rgba(190, 204, 216, 0.4);
          border-bottom: 1px solid rgba(190, 204, 216, 0.4);
          //   margin-right: 10px;
          overflow: hidden;

          .img {
            font-size: 60px;
            color: $theme;
          }
          .body {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform: translateX(-100%);
            transition: all 1s;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .box:hover {
          color: $theme;
          background: -webkit-linear-gradient(top left, #f8e8e2, #ffffff);

          .body {
            transform: translateX(0px);
          }
        }
      }
    }
  }
}
</style>